<template>
      <div class="mapCon" :style="mapStyle"  id="map"></div>
</template>
<script>
import echarts from "echarts";
require("echarts/map/js/china.js");
require("echarts/dist/extension/bmap.min.js");
import chart from "@/components/Charts/chart";

export default {
  name: "index",
  props: {
    mapStyle: {
      type: String,
      default: () => {
        return "";
      }
    },
    hoverObj: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  components: { chart },
  mounted() {
    var res = [
      {
        name: "瀍河区",
        percent: "6.78",
        value: 23412
      },
      {
        name: "老城区",
        percent: "6.78",
        value: 53255
      },
      {
        name: "洛龙区",
        percent: "6.78",
        value: 23453
      },
      {
        name: "西工区",
        percent: "6.78",
        value: 29853
      }
    ];
    this.fetchMap(res);
  },
  data() {
    return {
      mapOption: {}, // 地图option
      linesData: [], // 线路坐标
      cityArr: [], // 地点坐标
      areaDatas: [] // 区域的坐标
    };
  },
  methods: {
    fetchMap(placeData) {
      var startPoint = {
        x: 112.4291669108153,
        y: 34.66399962065898
      };
      // 地图自定义样式
      var bmap = {
        center: [startPoint.x, startPoint.y],
        zoom: 12,
        roam: false
      };
      var geoCoordMap = {
        瀍河区: [112.5173968324, 34.7099997538],
        老城区: [112.4391494561, 34.7253048201],
        西工区: [112.3912290473, 34.6546949187],
        洛龙区: [112.4704671537, 34.624888858]
      };
      var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            });
          }
        }
        return res;
      };
      var option = {
        bmap: bmap,
        tooltip: {
          trigger: "item",
          position: "top",
          extraCssText: "text-align:center;background-color:transparent",
          // 门店经纪人数和门店数量
          formatter: function(params) {
            var name = params.name;
            var value = "";
            if (typeof params.value[2] === "undefined") {
              value = params.value;
            } else {
              value = params.value[2];
            }
            var minResult = "";
            var minItem =
              "<div style=\"display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 10px\"><span>" +
              name +
              "</span><span style=\"margin-top:2px;font-family:DIN Condensed Bold;font-size:20px\">" +
              value +
              "</span></div>";
            minResult = minItem;
            var imgConStart =
              "<div style=\"display:flex;padding:12pt 12pt 12pt 12pt;color:#31cee6;flex-direction:column;background:rgba(0,0,0,0.7);border-radius:10px\">" +
              "<div style=\"width:100%;display:flex;align-items:center;justify-content:space-between;flex-direction:row;margin-top:8pt\">";

            var result =
              minResult === ""
                ? imgConStart + "</div>"
                : imgConStart + minResult + "</div>";
            return result;
          }
        },
        series: {
          type: "effectScatter",
          coordinateSystem: "bmap",
          data: convertData(placeData),
          rippleEffect: {
            brushType: "stroke"
          },
          showEffectOn: "render",
          label: {
            normal: {
              formatter: function(obj) {
                return "{a|" + obj.name + "}";
              },
              position: "inside",
              show: true,
              rich: {
                a: {
                  color: "#2a333d",
                  align: "center",
                  fontFamily: "DIN Condensed Bold",
                  fontSize: 25,
                  fontWeight: "bold"
                },
                b: {
                  color: "#2a333d",
                  align: "center",
                  fontFamily: "DIN Condensed Bold",
                  fontSize: 25,
                  lineHeight: 30,
                  fontWeight: "bold"
                }
              }
            }
          },
          // symbol: planePath,
          symbolSize: function(val) {
            return 100;
          },
          itemStyle: {
            normal: {
              color: "#2ff0d2"
            }
          }
        }
      };
      var self = this;
      self.mapChart = echarts.init(document.getElementById("map"));
      self.mapChart.setOption(option);
      self.mapChart.on("click", function(params) {
        self.$emit("on-map", params.name);
      });
    }
  }
};
</script>
<style scoped>
.mapCon {
  height: 416px;
  width: 694px;
}
</style>
